import React ,{Component} from 'react'
import './style.less'
import Header from '../../../../components/LoginComponent/Header'
// import {Link} from 'react-router-dom'
import { httpPost } from "../../../../http"

export default class Register extends Component{
	constructor(){
		super();
		this.state={
			username:'',
			password:'',
			repassword:''
		}
	}

	usernameChange(event) {
    this.setState({
      username: event.target.value
    });
  }
  passwordChange(event) {
    this.setState({
      password: event.target.value
    });
  }
  repasswordChange(event) {
    this.setState({
      repassword: event.target.value
    });
  }
  handleSubmit(event){
  	// console.log(this.state.username,this.state.password,this.state.repassword);
  	event.preventDefault();
  	 if(!this.state.username||!this.state.password ||!this.state.repassword){
           alert('内容不能为空');
      }else if(this.state.password!=this.state.repassword){
        alert('俩次密码不一致');
      }else{
      	httpPost("http://localhost:3001/use",{
	           username:this.state.username,
	    	})
	    .then(res=>{
				return res.json();
			})
			.then(data=>{
				if(!data.length){
	         httpPost("http://localhost:3001/register",{
	        	username:this.state.username,
	        	password:this.state.password,
	    	    })
	            .then(res=>{
	            	// console.log(res);
	            	return res.json();
	            })
	            .then(data=>{
	            	if(this.state.password==this.state.repassword){
	            		if(data.msg=="success"){
		            		alert('注册成功');
		            		this.props.history.push("/login")
	            	    }
					}
	            })
	        }else{
				alert('用户名已存在');
				this.setState({
				  repassword:"",
				  password:"",
				  username:""
				})
			}
		})
      }


  }

  render(){
    return(
    	<form onSubmit={this.handleSubmit.bind(this)}>
		    <div className="registered">
			    <Header title='手机号注册' history={this.props.history}/>
			        <div className="register">
			        	<div className="register-phone">
			         		<div className='register-phone-left'>
			         		 	+86
			         		</div>

			         	<div className="register-phone-right">
			         		<input type="text" placeholder="请输入手机号"  value={this.state.username} onChange={this.usernameChange.bind(this)}/>
			         	</div>
			        </div>
			        <div className="register-validation">
			         	<div className='register-validation-left'>
			         		 验证码
			         	</div>
			         	<div className="register-validation-middle">
			         		<input type="password" placeholder="验证码"  value={this.state.password} onChange={this.passwordChange.bind(this)} />
			         	</div>
			         	<div className="register-validation-right">
			         		<span>获取验证码</span>
			         	</div>
			        </div>
			        <div className="register-password">
			         	<div className='register-password-left'>
			         		 密码
			         	</div>
			         	<div className="register-password-right">
			         		<input type="password" placeholder="请输入6-16位密码" value={this.state.repassword} onChange={this.repasswordChange.bind(this)}/>
			         	</div>
			        </div>
		        </div>
			        <input type="submit" className='Andlogin' value='注册并登录' />
			        <p className="clause">用户注册即代表同意<span>《服务条款》</span></p>
		    </div>
		</form>
    )
  }
}
